
<template>
    <vue-particles id="tsparticles" @particles-loaded="particlesLoaded"  />
    <!-- url="http://foo.bar/particles.json" 由于是外网会报错因此不返回此json文件-->
    <vue-particles
    id="tsparticles"
    @particles-loaded="particlesLoaded"
    :options="config"
    />
    <div class="formContainer">
        <h3>智慧实验室管理平台</h3>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="ruleForm" status-icon>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>

            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import {useUserStore} from '../store/useUserStore'
import {useRouter} from 'vue-router'
import { ref, reactive } from 'vue'
import {config} from '@/util/config'
const {changeUser} = useUserStore()
//粒子配置
import {loadFull} from "tsparticles";
const particlesInit = async engine =>{
    await loadFull(engine);
};

// const particlesLoaded = async container => {
    
// };

//ref获取表单对象
const ruleFormRef = ref()
const ruleForm = reactive({
    username: "",
    password: ""
})

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
})
const router = useRouter()
//登录回调
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            //console.log('submit!')
            if(ruleForm.username==="admin"){
                handleLogin1()
        
            }else {
                handleLogin2()
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleLogin1 = ()=>{
    //设置localstorage管理员权限
    //最优：pinia默认存在内存，同步本地存储
    changeUser(
        {
        "id":1,
        "username":"admin",
        "password":"123",
        "role":{
            "rolename":"管理员",
            "roleType": 1,
            "rights":[
                "/index",
                "/user-manage",
                "/user-manage/list",
                "/right-manage",
                "/right-manage/rolelist",
                "/right-manage/rightlist",
                "/lab-manage",
                "/lab-manage/lablist",
                "/lab-manage/addlab",
                "/book-manage",
                "/book-manage/auditlist",
                "/book-manage/booklist"
                ]
            }

        }
    )
    //
    router.push("/")

}

const handleLogin2 = ()=>{
    changeUser({
        "id":2,
        "username":"kerwin",
        "password":"123",
        "role":{
                "rolename":"教师",
                "roleType": 1,
                "rights":[
                        "/index",
                        "/book-manage",
                        "/book-manage/booklist",
                        "/book-manage/addbook"
                        ]
                }
    })
    router.push("/")
}

</script>
<style lang="scss" scoped>
.formContainer {
    width: 500px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 2px 2px 5px black;
    text-align: center;
    z-index: 100;
    .ruleForm {
        margin-top: 50px;
    }

    h3 {
        font-size: 40px;
    }

    :deep(.el-form-item__label) {
        color: white;
        font-size: 16px;
        font-weight: 700;
    }
}
    </style>